<template>
  <div>
    <navigation-bar></navigation-bar>
    <div>
      <el-row justify="space-between">
        <el-col :span="4">
          <button @click="goBack" class="backBtn">返回课程列表</button>
        </el-col>
        <el-col :span="16" class="progress">
          <el-progress
            :text-inside="true"
            :percentage="Math.floor(courseId % 4) + 97"
            :stroke-width="30"
            :show-text="true"
            :striped="true"
            :format="
              (percent) => {
                return `课程进度${percent}%`;
              }
            "
          />
        </el-col>
      </el-row>
      <div class="main">
        <div class="upper">
          <el-row>
            <el-col :span="8">
              <CourseInfo class="course-info" :courseId="courseId" />
            </el-col>
            <el-col :span="8">
              <CourseLessons class="course-lessons" :courseId="courseId" />
            </el-col>
            <el-col :span="8">
              <RecentExamAndWarn class="temp-relation" :courseId="courseId" />
            </el-col>
          </el-row>
        </div>
        <div class="lower">
          <CourseRadar class="course-radar" :courseId="courseId" />
          <CourseTaskCreateUpdateTime
            class="course-task"
            :courseId="courseId"
          />
          <TestAnalysis class="test-analysis" :courseId="courseId" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import CourseSearchBar from "../components/Course/CourseSearchBar.vue";
import CourseInfo from "../components/Course/CourseInfo.vue";
import CourseLessons from "../components/Course/CourseLessons.vue";
import CourseTaskCreateUpdateTime from "../components/Course/CourseTaskCreateUpdateTime.vue";
import CourseRadar from "../components/Course/CourseRadar.vue";
import TestAnalysis from "../components/Course/TestAnalysis.vue";
import RecentExamAndWarn from "../components/Course/RecentExamAndWarn.vue";
import NavigationBar from "@/components/NavigationBar.vue";

export default {
  name: "SingleCourse",
  props: ["courseId"],
  components: {
    CourseSearchBar,
    CourseInfo,
    CourseLessons,
    CourseTaskCreateUpdateTime,
    CourseRadar,
    TestAnalysis,
    RecentExamAndWarn,
  },

  methods: {
    goBack() {
      this.$router.go(-1);
    },
  },
};
</script>

<style scoped>
.top {
  display: flex;
  flex-direction: column;
  height: 7vh;
  background-color: rgb(226, 229, 234);
}

.main {
  display: flex;
  flex-direction: column;
  align-content: space-between;
  flex: 1 1 0;
}

.upper {
  height: 37vh;
}

.lower {
  display: flex;
  justify-content: space-between;
  flex: 1 1 0;
  height: 45vh;
  background-color: whitesmoke;
}

.backBtn {
  padding: 8px 8px;
  margin: 8px;
  color: #fff;
  background-color: #007bff;
  border: none;
  border-radius: 10px;
  text-decoration: none;
  font-size: 16px;
  transition: background-color 0.3s ease;
  width: 20vw;
  margin-left: 2vw;
}

.progress {
  padding: 8px 8px;
  margin: 8px;
}
</style>
